<template>
  <view class="container">
    <button class="pick-btn" @click="chooseImage">选择图片</button>
    <view class="image-list">
      <image 
        v-for="(img, index) in imageList" 
        :key="index" 
        :src="img" 
        class="preview-img" 
        @click="previewImage(index)"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.imageList = res.tempFilePaths;
        }
      });
    },
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.imageList
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
.pick-btn {
  margin-bottom: 30rpx;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.preview-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
}
</style>